<template>
  <div>
    <el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="0px"
             label-position="left"
             :style="{marginTop: '20px'}">
      <!-- 第一行: 下拉框 + 输入框 + 按钮 -->
      <el-row gutter="13" justify="center">
        <el-col :span="2">
<!--          <el-form-item label-width="-1px" label="" prop="MainType">-->
<!--            <el-select v-model="formData.MainType" placeholder="关键词" clearable :style="{width: '100%'}">-->
<!--              <el-option v-for="(item, index) in MainTypeOptions" :key="index" :label="item.label"-->
<!--                         :value="item.value" :disabled="item.disabled"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label-width="-1px" label="" prop="MainTypeLogic">
            <el-select
                v-model="formData.MainTypeLogic"
                placeholder="AND"
                :style="{width: '100%'}"
            >
              <el-option
                  v-for="(item, index) in LogicOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label-width="-1px" label="" prop="MainTypeValue">
            <el-input
                v-model="formData.MainTypeValue"
                placeholder="请输入"
                clearable
                class="input-with-select"
            >
              <template #prepend>  <!-- 使用 v-slot 语法 -->
                <el-select
                    v-model="formData.MainType"
                    placeholder="关键词"
                    style="width: 100px"
                >
                  <el-option
                      v-for="(item, index) in MainTypeOptions"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="-2px" label="">
            <el-button  @click="addRow" >
              <el-icon><Plus /></el-icon>
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>


      <!-- 第二行: 下拉框 + 输入框 + 按钮 -->
      <el-row gutter="13" justify="center">
        <el-col :span="2">
<!--          <el-form-item label-width="-1px" label="" prop="secondMainTypeValue">-->
<!--            <el-select v-model="formData.secondMainType" placeholder="关键词" clearable :style="{width: '100%'}">-->
<!--              <el-option v-for="(item, index) in SecondTypeOptions" :key="index" :label="item.label"-->
<!--                         :value="item.value" :disabled="item.disabled"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label-width="-1px" label="" prop="secondMainTypeLogic">
            <el-select
                v-model="formData.secondMainTypeLogic"
                placeholder="AND"
                :style="{width: '100%'}"
            >
              <el-option
                  v-for="(item, index) in LogicOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label-width="-1px" label="" prop="secondMainTypeValue">
            <el-input
                v-model="formData.secondMainTypeValue"
                placeholder="请输入"
                clearable
                class="input-with-select"
            >
              <template #prepend>  <!-- 使用 v-slot 语法 -->
                <el-select
                    v-model="formData.secondMainType"
                    placeholder="关键词"
                    style="width: 100px"
                >
                  <el-option
                      v-for="(item, index) in SecondTypeOptions"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled"
                  />
                </el-select>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="-2px" label="">
            <el-button  @click="addRow">
              <el-icon><Plus /></el-icon>
            </el-button>
            <el-button  @click="removeRow">
              <el-icon><Minus /></el-icon>
            </el-button>
          </el-form-item>

        </el-col>

      </el-row>

      <!-- 动态条件行 -->
      <el-row v-for="(row, index) in dynamicRows" :key="index" gutter="13" justify="center">
        <el-col :span="2">
<!--          <el-form-item label-width="-1px" label="" :prop="`dynamicRows[${index}].field`">-->
<!--            <el-select v-model="row.field" placeholder="关键词" clearable :style="{width: '100%'}">-->
<!--              <el-option v-for="(item, index) in MainTypeOptions" :key="index" :label="item.label"-->
<!--                         :value="item.value" :disabled="item.disabled"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label-width="-1px" label="" :prop="`dynamicRows[${index}].logic`">
            <el-select
                v-model="row.logic"
                placeholder="AND"
                :style="{width: '100%'}"
            >
              <el-option
                  v-for="(item, optIndex) in LogicOptions"
                  :key="optIndex"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label-width="-2px" label="" :prop="`dynamicRows[${index}].value`">

            <el-input
                v-model="row.value"
                placeholder="请输入"
                clearable
                class="input-with-select"
            >
              <template #prepend>
                <el-select
                    v-model="row.field"
                    placeholder="关键词"
                    style="width: 100px"
                    clearable
                >
                  <el-option
                      v-for="(item, optIndex) in MainTypeOptions"
                      :key="optIndex"
                      :label="item.label"
                      :value="item.value"

                  />
                </el-select>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="-2px" label="">
            <el-button @click="addRow">
              <el-icon><Plus /></el-icon>
            </el-button>
            <el-button @click="removeDynamicRow(index)">
              <el-icon><Minus /></el-icon>
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行: 多选框 -->
      <el-row justify="center">
        <el-form-item label="" prop="DocumentType">
          <el-checkbox-group v-model="formData.DocumentType" size="default">
            <el-checkbox v-for="(item, index) in DocumentTypeOptions" :key="index" :label="item.value"
                         :disabled="item.disabled">{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-row>

      <!-- 提交按钮 -->
      <el-row gutter="20" justify="center">
        <el-form-item label-width="3px" label="">
          <el-button type="primary" icon="Search" size="default" @click="submitForm"> 搜索 </el-button>

        </el-form-item>
        <el-form-item label-width="3px" label="">
          <el-button type="primary" icon="Refresh" size="default" @click="resetQuery"> 重置 </el-button>

        </el-form-item>
      </el-row>


    </el-form>




    <el-table v-loading="loading" :data="SearchList">
      <el-table-column label="档号" align="center" prop="mysqlDanghao" />
      <el-table-column label="标题" align="center" prop="title" />
      <el-table-column label="简介/描述" align="center" prop="description" />
      <el-table-column label="保密等级" align="center" prop="secretLevel" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="文件类型" align="center" prop="fileType" />
      <el-table-column label="文件路径" align="center" prop="filePath" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" @click="handleDetail(scope.row)" v-hasPermi="['manage:document:query']">查看</el-button>
<!--          <el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['manage:document:edit']">修改</el-button>-->
<!--          <el-button link type="primary"  @click="handleDelete(scope.row)" v-hasPermi="['manage:document:remove']">删除</el-button>-->
        </template>
      </el-table-column>

    </el-table>





  </div>
</template>
<script setup>
import {
  ElMessage
}
from 'element-plus'
import { ElasticsearchArchiveList } from "@/api/manage/ElasticsearchArchive.js";
import { Plus, Minus } from '@element-plus/icons-vue'; // 引入图标





const loading = ref(false);
const SearchList = ref([]);
const total = ref(0);
// const dynamicRows = ref([]); // 动态条件行
const dynamicRows = ref([{ field: '', value: '', logic: 'AND' }]);




const formRef = ref()
const data = reactive({
  formData: {
    MainType: '',
    MainTypeValue: undefined,
    MainTypeLogic: 'AND',
    secondMainType: '',
    secondMainTypeValue: undefined,
    secondMainTypeLogic: 'AND',
    DocumentType: [],
  },
  rules: {
    MainType: [{
      required: true,
      message: '关键词',
      trigger: 'change'
    }],

    secondMainType: [{
      required: false,
      message: '关键词',
      trigger: 'change'
    }],
    MainTypeValue: [{
      required: true,
      message: '请输入',
      trigger: 'blur'
    }],
    secondMainTypeValue: [{
      required: false,
      message:'关键字',
      trigger: 'change'
    }],
  }
})
const {
  formData,
  rules
} = toRefs(data)
const MainTypeOptions = ref([{
  "label": "标题",
  "value": "title"
}, {
  "label": "简介",
  "value": "description"
}, {
  "label": "档号",
  "value": "mysqlDanghao"
},{
  "label": "路径",
  "value": "filePath"
}])
const SecondTypeOptions = ref([{
  "label": "标题",
  "value": "title"
}, {
  "label": "简介",
  "value": "description"
}, {
  "label": "档号",
  "value": "mysqlDanghao"
},{
  "label": "路径",
  "value": "filePath"
}])
const DocumentTypeOptions = ref([{
  "label": "电子档案",
  "value": 1
}, {
  "label": "实体档案",
  "value": 2
}])

const LogicOptions = ref([
  { label: 'AND', value: 'AND', disabled: false },
  { label: 'OR', value: 'OR', disabled: false },
  { label: 'NOT', value: 'NOT', disabled: false }
]);

/**
 * @name: 表单提交
 * @description: 表单提交方法
 * @return {*}
 */


// /** 查看详情按钮操作 */
// function gotoDetail(row) {
//   const _id = row.id;
//   proxy.$router.push({ path: '/manage/archive/arc-detail/', query: { id: _id} });
// }
//
//
// function handleDetail(row) {
//   proxy.$router.push({ path: "/manage/archive/arc-detail", query: { id: row.id } });
// }

// 添加条件行
const addRow = () => {
  dynamicRows.value.push({ field: '', value: '',logic: 'AND' });
};

// 静态删除条件行
const removeRow = () => {
  if (dynamicRows.value.length > 0) {
    dynamicRows.value.pop();
  }
};
// 动态行删除方法
const removeDynamicRow = (index) => {
  if (dynamicRows.value.length > 0) {
    dynamicRows.value.splice(index, 1)
  }
}

/** 重置按钮操作 */
function resetQuery() {
  // 重置表单验证状态
  formRef.value.resetFields();

  // 重置静态表单数据
  formData.value = {
    MainType: '',
    MainTypeValue: undefined,
    MainTypeLogic: 'AND',
    secondMainType: '',
    secondMainTypeValue: undefined,
    secondMainTypeLogic: 'AND',
    DocumentType: [],
  };

  // 重置动态行内容
  dynamicRows.value = dynamicRows.value.map(() => ({
    field: '',
    value: '',
    logic: 'AND'
  }));
}

// 提交表单
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 合并静态条件和动态条件
      const searchParams = {
        MainType: formData.value.MainType,
        MainTypeValue: formData.value.MainTypeValue,
        MainTypeLogic: formData.value.MainTypeLogic, // 添加静态条件的逻辑
        secondMainType: formData.value.secondMainType,
        secondMainTypeValue: formData.value.secondMainTypeValue,
        secondMainTypeLogic: formData.value.secondMainTypeLogic, // 添加静态条件的逻辑
        DocumentType: formData.value.DocumentType.join(','), // 将数组转换为字符串
      };
      // 添加动态条件
      dynamicRows.value.forEach((row, index) => {
        searchParams[`dynamicField${index}`] = row.field; // 动态字段名
        searchParams[`dynamicValue${index}`] = row.value; // 动态字段值
        searchParams[`dynamicLogic${index}`] = row.logic; // 动态字段值
      });
      // 动态条件改为数组格式（推荐）
      // dynamicConditions: dynamicRows.value.map(row => ({
      //   logic: row.logic,  // 动态条件的逻辑
      //   field: row.field,  // 动态条件的字段
      //   value: row.value   // 动态条件的值
      // }));
      console.log('提交的参数：', searchParams); // 打印参数
      // 调用搜索接口
      getList(searchParams);
    } else {
      console.log('表单验证失败');
    }
  });
};

function getList(searchParams) {
  loading.value = true;
  ElasticsearchArchiveList(searchParams).then(response => {
    SearchList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};


</script>
<style>

/* 调整组合输入框样式 */
.input-with-select {
  width: 100%;
}

/* 调整选择框宽度 */
:deep(.input-with-select .el-select) {
  width: 120px;
}

/* 保持输入框和选择框高度一致 */
:deep(.input-with-select .el-input-group__prepend) {
  background-color: #fff;
  padding: 0 12px;
}
</style>
